<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <span>{{message}}</span>
        <span v-bind:title="msg1">看着</span>
        <span v-if="seen">现在你看到了我</span>
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
        <button v-on:click="reverseMessage">反转消息按钮</button>

        <input v-model="message" />
    </div>

    <script>
        let app=new Vue({
            el:"#app",
            data:{
                message:"vue first",
                msg1:"页面加载与"+new Date().toLocaleString(),
                seen:true,
                todos:[
                    {text:"学习javascript"},
                    {text:"学习vue"},
                    {text:'整个项目牛'},
                ]
            },
            methods:{
                reverseMessage:function(){
                    this.message=this.message.split('').reverse().join('');
                }
            }
        });
    </script>
</body>
</html>